<template>
	<view :style="{'--bgcolor':pageData.bgColor,'--color':color,backgroundColor:pageData.bgColor}" >
		<!-- <view class="title d-flex color_22 size30">{{title}}</view> -->
		<view class="viewbox auto p-top32" v-if="infoData.length">
			<view class="list bor_radius_10" v-for="(item,index) in infoData" :key="index" @click="toUrl('/pages/reserve/formSubmit?ordId='+item.order_id)">
				<image :src="$imgUrls(item.wzn_act_img)" mode="aspectFill" class=" wzn_act_img p-bot32" v-if="item.wzn_act_img"></image>
				<view class="size32 bold300 p-bot32" v-if="!pageData.hideTitle">{{item.order_name}}</view>
				<view class="row j-sb a-center">
					<view class="flex-1 d-flex f-column m-right20">
						<view class="d-flex a-start m-bot20" v-if="pageData.hideTime != 2">
							<text class="h6 color_99 m-right20 f-shrink-0 bold300">时间:</text>
							<text class="color_66 size28 bold300" v-if="!pageData.hideTime">{{item.order_starttime}} - {{item.order_endtime}}</text>
							<text class="color_66 size28 bold300" v-else>{{item.order_starttime.split(' ')[0]}} - {{item.order_endtime.split(' ')[0]}}</text>
						</view>
						<view class="d-flex a-start m-bot20" v-if="item.order_tel && !pageData.hideTel">
							<text class="h6 color_99 m-right20 bold300">电话:</text>
							<text class="color_66 size28 bold300">{{item.order_tel}}</text>
						</view>
						<view class="d-flex a-start m-bot20" v-if="item.order_address && !pageData.hideAddr">
							<text class="h6 color_99 m-right20 f-shrink-0 bold300">地址:</text>
							<text class="color_66 size28 bold300">{{item.order_address}}</text>
						</view>
					</view>
					<view class="btn white size28 flexac m-bot20">{{ item.order_title || '立即预约' }}</view>
				</view>
			</view>
			
			
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		name: 'fromList',
		props:['pageData','title'],
		data() {
			return {
				infoData:[],
			}
		},
		mounted() {
			this.getBlockInfo();
		},
		methods: {
			async getBlockInfo(){
				const result = await this.$getBlockInfo(this.pageData.list);
				if(!result.list.length) return;
				this.infoData = result.list || [];
			}
		},
		computed: {
			...mapState(['color'])
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		width: 100%;
		padding: 20rpx 30rpx 20rpx 44rpx;
		position: relative;
	}

	.title::after {
		content: "";
		width: 6rpx;
		height: 26rpx;
		position: absolute;
		left: 30rpx;
		top: 50%;
		transform: translate(0, -50%);
		background-color: var(--color);
		border-radius: 4rpx;
	}

	// .list {
	// 	width: 100%;
	// 	background-color: #ffffff;
	// }

	.btn {
		min-width: 150rpx;
		height: 50rpx;
		border-radius: 25rpx;
		background-color: var(--color);
	}
	.wzn_act_img{
		width:100%;
		height: 460rpx;
	}
</style>